<template>
    <li :id="todoObj.id">
        <label>
            <input type="checkbox" :checked="todoObj.done" @click="handleCheck(todoObj.id)"/>
            <span>{{ todoObj.title }}</span>
        </label>
        <button class="btn btn-danger" @click="handleDelete(todoObj.id)">删除</button>
    </li>

</template>

<script>
    export default {
        name: 'MyItem',
        props: {
            todoObj: {
                type: Object,
                required: true
            },
            handleCheckEvent: {
                type: Function,
                required: true
            },
            deleteTodo: {
                type: Function,
                required: true
            }
        },
        methods: {
            handleCheck(id) {
                console.log(id)
                //  调用接口进行回传
                this.handleCheckEvent(id);
            },
            handleDelete(id) {
                if (confirm('确定删除吗？')) {
                    console.log(id)
                    this.deleteTodo(id)
                }
            }
        }
    }

</script>
<style scoped>

    /*item*/
    li {
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label {
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button {
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before {
        content: initial;
    }

    li:last-child {
        border-bottom: none;
    }

    li:hover {
        background-color: #ddd;
    }

    li:hover button {
        display: block;
    }

</style>